import { useEffect, useState } from 'react'
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(20)
  const [name,setName]=useState('张三')
  const handelUp=()=>{
    setCount(count+1)
  }
  const handelDown=()=>{
    setCount(count-1)
  }
  const handelEx=()=>{
    setName('李四')
  }
  
  return (
    <div>
      <h2>年龄:{count}</h2>
      <button onClick={()=>handelUp()}>+1</button>
      <button onClick={()=>handelDown()}>-1</button>

      <h2>名字:{name}</h2>
      <button onClick={()=>handelEx()}>改名</button>
    </div>
    // <>
    //   <div>
    //     <h1>游乐园</h1>
    //     <a href="https://vite.dev" target="_blank">
    //       <img src={viteLogo} className="logo" alt="Vite logo" />
    //     </a>
    //     <a href="https://react.dev" target="_blank">
    //       <img src={reactLogo} className="logo react" alt="React logo" />
    //     </a>
    //   </div>
    //   <h1>Vite + React</h1>
    //   <div className="card">
    //     <button onClick={() => setCount((count) => count + 1)}>
    //       count is {count}
    //     </button>
    //     <p>
    //       Edit <code>src/App.tsx</code> and save to test HMR
    //     </p>
    //   </div>
    //   <p className="read-the-docs">
    //     Click on the Vite and React logos to learn more
    //   </p>
    // </>
  )
}

export default App
